<link rel="stylesheet" href="/assets/home/css/comment.css" />
<!-- 评分插件 -->
<link rel="stylesheet" href="/assets/home/plugin/raty/raty.css" />
<script src="/assets/home/plugin/raty/raty.min.js"></script>

<img src="{$orderinfo.subject ? $orderinfo.subject.thumbs_text : ''}" style="width:100%;height: 240px;object-fit: cover;">
<div class="weui-cells__title" style="font-size:16px;">{$orderinfo.subject ? $orderinfo.subject.title : '暂无课程名称'}</div>
<form method="post">
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="请输入内容" name="content" rows="3" {$orderinfo.comment.id ? 'disabled' : ''} >{$orderinfo.comment.content}</textarea>
                <div class="weui-textarea-counter"><span>0</span>/200</div>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div id="raty" data-raty></div>
                <input type="hidden" name="rate" id="rate">
            </div>
        </div>
    </div>
    <div class="action">
        {if condition="$orderinfo.comment.id"}
            <button type="button" class="mui-btn mui-btn-warning">已评价</button>
        {else /}
            <button type="submit" class="mui-btn mui-btn-primary">立即提交</button>
        {/if}
    </div>
</form>
<script>
    const raty = new Raty(document.getElementById('raty'), {
        score: `{$orderinfo.comment.rate}`, // 初始分数
        size:10,
        starHalf: "/assets/home/plugin/raty/images/star-half.png", // 半星的图片的地址
        starOff: "/assets/home/plugin/raty/images/star-off.png",  // 空星的图片的地址
        starOn: "/assets/home/plugin/raty/images/star-on.png",  //满星的图片的地址
        halfShow: true,   //显示半星
        readOnly: `{$orderinfo.comment.id ? true : false}`, //只读
        click: function (score) {
           $("#rate").val(score)
        }
    });
    raty.init()
</script>